<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '../../dashboard/mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.setOptions(this.chartData)
    },
    setOptions(data) {
      this.chart.setOption(
          {
            tooltip: {
              trigger: 'axis',
              show: false,
              axisPointer: {
                type: 'shadow'
              }
            },
            legend: {

            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '5%',
              containLabel: true
            },
            xAxis: {
              type: 'value',
              boundaryGap: [0, 0.01],
              axisLine:{     //x轴坐标轴，false为隐藏，true为显示
                "show":false
              },
              axisLabel: {
                "show": false,
                textStyle: {
                  show:true,
                  fontSize: '12',
                  fontFamily: 'PingFang SC',
                  fontWeight: 500,
                  color: '#FFFFFF'
                }
              },
              splitLine :{    //网格线
                lineStyle:{
                    type:'dashed',    //设置网格线类型 dotted：虚线   solid:实线
                    color: '#21357B'
                },
                show:false //隐藏或显示
              }
            },
            yAxis: [
              {
              type: 'category',
              data: data.yAxis,
              
              axisLabel: {
                textStyle: {
                  show:true,
                  fontSize: '12',
                  fontFamily: 'PingFang SC',
                  fontWeight: 500,
                  color: '#FFFFFF'
                }
             }
            },
              {
                name: '单位/元',
                axisLine:{     //x轴坐标轴，false为隐藏，true为显示
                  "show":false
                },
                nameTextStyle: {
                  nameLocation: 'start',
                  fontSize: '12px',
                  fontFamily: 'PingFang SC',
                  fontWeight: 500,
                  color: '#fff'
                },
              }
            ],
            series: [
              {
                // name: '2011',
                data: data.xAxis,               
                type: 'bar',
                barWidth: '25%',
                itemStyle: {
                  normal: {
                    color: function (params) {
                      let colorList = [
                        ['#7C8BFF', '#B8B5FF'],
                        ['#02FFA3', '#62FFF7'],
                        ['#FFEDC6', '#FBF7F0'],
                        ['#C567FC', '#6723F9'],
                        ['#303758', '#FFAF77'],
                        ['#7C8BFF', '#B8B5FF'],
                        ['#02FFA3', '#62FFF7'],
                        ['#FFEDC6', '#FBF7F0'],
                        ['#C567FC', '#6723F9'],
                      ];
                      let colorItem = colorList[params.dataIndex];
                      return new echarts.graphic.LinearGradient(0,0,1,0, //y->y2
                        [
                          {
                            offset: 0,
                            color: colorItem[0]
                          },
                          {
                            offset: 1,
                            color: colorItem[1]
                          }
                        ],
                        false
                      )},
                    label: {
                        show: true,		// 开启显示
                        distance: 40,     // 条柱之间的距离
                        position: [20, -12],	// 在上方top在右侧right显示
                        textStyle: {	    // 数值样式
                          color: '#FFFFFF',
                          fontSize: 14,
                          fontFamily: 'YouSheBiaoTiHei',
                          fontWeight: 400
                        }
                      }
                  },
                }
             }
            ]
          }
            )
          }
        }
}
</script>
